<template>
  <div style="height: 100vh; overflow: hidden">
    <div style="width: 500px; height: 400px; background-color: white;
  border-radius: 10px; margin: 150px auto; padding: 20px 40px">
      <div style="margin-bottom: 20px; text-align: center;
          font-size: 36px; font-weight: bold; color: dodgerblue">
        疯狂星期四管理系统
      </div>
      <div style="margin-top: 30px; margin-bottom: 20px; text-align: left;
          font-size: 20px; font-weight: bold; color: dodgerblue">
        账户登录
      </div>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名" size="medium"
                    @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" prefix-icon="el-icon-unlock" placeholder="请输入密码" size="medium"
                    show-password @keydown.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 60%" type="primary" size="medium" @click="login">登录</el-button>
          <el-button style="width: 37%" type="warning" size="medium" @click="signUp">注册</el-button>
          <el-button style="margin-left: 85%" type="text" size="medium" @click="forget">忘记密码</el-button>
          <el-button style="margin-left: 90%" type="text" size="medium" @click="jump">vivo50</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
  name: "Login",
  data() {
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'));
      } else if (!/^[a-zA-Z0-9]{3,30}$/.test(value)) {
        callback(new Error('用户名长度3-30位，由数字或英文字母组成'));
      }
      callback();
    };
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (!/^\w{5,30}$/.test(value)) {
        callback(new Error('密码长度5-30位，由数字、26个英文字母或者下划线组成'));
      }
      callback();
    };
    return {
      form: {},
      rules: {
        username: [
          {validator: checkUsername, required: true, trigger: 'blur'}
        ],
        password: [
          {validator: checkPassword, required: true, trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    login() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request.post('/login', this.form).then(res => {
            if (res.code === "200") {
              this.$notify.success({title: "", message: '登录成功', position: 'bottom-left'})
              if (res.data !== null) {
                Cookies.set('login', JSON.stringify(res.data))
              }
              this.$router.push('/')
            } else {
              this.$notify.error({title: "", message: res.msg, position: 'bottom-left'});
            }
          })
        }
      })
    },
    signUp() {
      this.$router.push("/signup")
    },
    jump() {
      window.open('https://gitee.com/ricesugar/library-management-system', '_blank');
    },
    forget() {
      this.$notify.info({title: '', message: '请联系管理员修改密码', position: 'bottom-left'});
    }
  }
}
</script>